<template>
	<view class="home-access">
		<!-- S 顶部导航 -->
		<sol-navbar title="主页访问限制"></sol-navbar>
		<!-- E 顶部导航 -->

		<!-- S 期待数值 -->
		<view class="home-access__label">输入你期待的数值</view>
		<input class="home-access__value" type="number" placeholder="1块碎片=1元" :maxlength="3" v-model="value" />
		<!-- E 期待数值 -->

		<!-- S 想说的话 -->
		<view class="home-access__label">说一段对读者想说的话吧！</view>
		<textarea class="home-access__brief" placeholder="输入文字(255字内)" :maxlength="255" :show-confirm-bar="false"
			v-model="brief" />
		<!-- E 想说的话 -->

		<!-- S 说明 -->
		<view class="home-access__explain">
			<text>1. 若没有设置，数值将默认为10</text>
			<text>2. 1块时间碎片等于1元人民币</text>
			<text>3. 文字内容不准违反互联网文明公约，否则无效设置处理</text>
			<text>4. 用户浏览你的全部内容，需要给予你相对应的时间碎片，时效为30天内，30天时效过后需重新向您付费</text>
		</view>
		<!-- E 说明 -->

		<button class="home-access__btn" @click="fnSave">保存设置</button>

		<view class="safe-area-inset-bottom" style="height: 96rpx;"></view>
	</view>
</template>

<script>
	export default {
		name: "HomeAccess",
		data() {
			return {
				// 期待数值
				value: null,
				// 想说的话
				brief: null,
			};
		},
		computed: {},
		methods: {
			// 保存设置
			fnSave() {
				this.$log(this.$options.name, 51);
				this.$log(this.value);
				this.$log(this.brief);
			}
		}
	}
</script>

<style lang="scss">
	.home-access {
		min-height: 100vh;
		background-color: $--color-background;

		&__label {
			padding: 28rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #BBBBBB;
		}

		&__value {
			height: 112rpx;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 4rpx;
			color: #dddddd;
			border-radius: 24rpx;
			background-color: #474e54;
			padding: 0 28rpx;
			margin-left: 28rpx;
			width: 85%;
		}

		&__brief {
			height: 350rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 4rpx;
			color: #dddddd;
			border-radius: 24rpx;
			background-color: #474e54;
			padding: 28rpx;
			margin-left: 28rpx;
			width: 85%;
		}

		&__explain {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			font-size: 28rpx;
			font-weight: 400;
			color: #878787;
			line-height: 42rpx;
			letter-spacing: 4rpx;
			margin: 64rpx 28rpx 90rpx;
		}

		&__btn {
			width: 424rpx;
			height: 94rpx;
			line-height: 94rpx;
			border-radius: 94rpx;
			border: none;
			overflow: hidden;
			padding: 0;
			font-size: 32rpx;
			font-weight: normal;
			letter-spacing: 4rpx;
			background-color: #607d8b !important;
			color: #DDDDDD !important;
		}
	}
</style>
